<template>
  <div id="home">
    <!-- navbar部分 -->   
    <Navbar class="home_nav"><div slot="nav_center">购物街</div></Navbar> 
    <Tabcontrol :titles="['流行','新款','精选']" 
      @tabclick="changeType" 
      ref="tab_control2" 
      class="tab_control2"
      v-show="istabShow"></Tabcontrol>
    <Scroll class="wraper" ref="scroll" :pullupload="true" :poobetype="3">
        <div class="content">
           <!-- 轮播图部分 -->
          <MainSwiper :banner="banners" class="swiper_top"/>
          <!--推荐部分-->
          <Home_recommend :recommend="recommendView"></Home_recommend>
          <!--特性部分！-->
          <FeatureView></FeatureView> 
          <!--tabcontrol部分！-->
          <Tabcontrol :titles="['流行','新款','精选']" @tabclick="changeType" ref="tab_control1"></Tabcontrol>
          <!--产品展示部分！-->
          <TotalGoods :goodsList="goods[currenttype].list"></TotalGoods>
        </div>
    </Scroll>

    <Backtop @click.native="backClick" v-show="isShow"></Backtop>
    
  </div>
</template>

<script>
import Navbar from "components/common/navbar/Navbar";
import BScroll from "better-scroll";
import Scroll from "components/common/scroll/Scroll"

import Tabcontrol from "components/content/tabcontrol/Tabcontrol"

import MainSwiper from "./homeComps/MainSwiper";
import Home_recommend from "./homeComps/Home_recomend";
import FeatureView from "./homeComps/FeatureView";

import TotalGoods from "components/content/maingoods/TotalGoods";
import GoodsItem from "components/content/maingoods/GoodsItem";
import Backtop from "components/content/backtop/Backtop";

import {getHomeData, getGoodslist} from "network/home";
import {debounce} from "common/utils";

export default {
  name: "Home",
  data(){
    return {
      scroll: null,
      banners: null,
      recommendView: null,
      currenttype: "pop",
      isShow: false,
      goods: {
        "pop": {page:0,list:[]},
        "new": {page:0,list:[]},
        "sell": {page:0,list:[]}
      },
      istabShow: false,
      isSloaded: false,
      isRloaded: false,
      offsettop: 0
    }
  },
  components: {
    Navbar,
    Backtop,
    Scroll,
    Tabcontrol,

    MainSwiper,
    Home_recommend,
    FeatureView,

    TotalGoods,
    GoodsItem
  },

  created: function(){
    this.getB_and_R();
    this.getGoodslist("pop");
    this.getGoodslist("new");
    this.getGoodslist("sell");
    this.scroll && this.scroll.scroll.refresh();
  },


  methods: {
    /*方法相关*/
    changeType(index){
      switch(index){
        case 0:
          this.currenttype = "pop";
          break;
        case 1:
          this.currenttype = "new";
          break;
        case 2:
          this.currenttype = "sell";
          break;
      }
      // console.log(index);

      this.$refs.tab_control1.currentIndex = index; 
      this.$refs.tab_control2.currentIndex = index; 
    },

    backClick(){
      this.scroll.scroll.scrollTo(0,0,500);   
      // console.log(this.scroll.scroll);   
    },

    /*网络请求相关*/
    getB_and_R(){
      getHomeData().then(res=>{
        this.banners = res.data.banner.list;
        this.recommendView = res.data.recommend.list;
      },err=>{
        console.log(err);
      })
    },

    getGoodslist(type){
      const page = this.goods[type].page+1;
      getGoodslist(type,page).then(res=>{
        this.goods[type].list.push(...res.data.list);
        this.goods[type].page += 1;
        // console.log(this.goods[type].list);

        this.scroll.scroll.finishPullUp();
      }).catch(err=>{
        console.log(err);
      })
    },
    
  },

  mounted: function(){
    this.scroll = this.$refs.scroll;
    this.$bus.$on("sImgLoad",()=>{
      // console.log("simgload_home");
      this.scroll.scroll.refresh();
      if(!this.isSloaded){
        this.offsettop = this.$refs.tab_control1.$el.offsetTop;
        // console.log(this.$refs.tab_control1.$el.offsetTop);
        // console.log(this.offsettop);
        this.isSloaded = true;
      }
      // console.log(this.scroll);
    });

    this.$bus.$on("rImgLoad",()=>{
      // console.log("rimgload_home");
      this.scroll.scroll.refresh();
      // console.log(this.scroll);
      if(!this.isRloaded){
        this.offsettop = this.$refs.tab_control1.$el.offsetTop;
        // console.log(this.$refs.tab_control1.$el.offsetTop);
        // console.log(this.offsettop);
        this.isRloaded = true;
      }
    });

    this.$bus.$on("gImgLoad",()=>{
      // console.log("gimgload_home");
      this.scroll.scroll.refresh();      
      // console.log(this.scroll);
    });

    // 设置backtop图标是否显示
    this.scroll.scroll.on("scroll",(position)=>{
      this.isShow = (-position.y) > 1000;

      this.istabShow = (-position.y) > this.offsettop;
    });

    this.scroll.scroll.on("pullingUp",()=>{
      this.getGoodslist(this.currenttype);
    })
  }
   
}
</script>

<style scoped>
  
  .home_nav{
    
    background-color:#ff8198;
    z-index: 9;
  }
  .test{
    height: 5000px;
    width: 100%
  }
  

  .wraper{
    width: 100%;
    position: absolute;
    top:44px;
    bottom: 49px;
    left: 0px;
    right: 0px;
    
    overflow: hidden;
  }

  .tab_control2{
    
    z-index: 30;
  }

</style>